<template>
  <el-form
    :model="model"
    ref="formControl"
    :inline="false"
    class="demo-form-inline"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
    :size="size"
    v-bind="$attrs"
  >
      <el-row :gutter="15">
        <el-col :span="cardSpan"
          v-for="(item, index) in cardOrder" :key="index"
        >
          <el-card class="box-card" style="margin-bottom: 10px;">
            <template #header>
              <div class="card-header">
                <span>{{item.title}}</span>
              </div>
            </template>
            <base-item
              :colOrder="item.colIds"
              :itemMeta="itemMeta"
              :ruleMeta="ruleMeta"
              :showCol="showCol"
              :formColSpan="formColSpan"
              :model="model"
              :size="size"
              >
            </base-item>
          </el-card>    
        </el-col>
      </el-row>
    
  </el-form>
</template>

<script lang="ts">
/* eslint-disable vue/no-setup-props-destructure */
  import { defineComponent, ref, computed, onMounted } from 'vue'
  import { ElForm, ElRow, ElCol, ElCard } from 'element-plus'
  // 封装 el-form-item
  import baseItem from './base-item.vue'

  // 表单控件的属性 
  import { formProps, formController } from '../map'

  export default defineComponent({
    name: 'el-from-div',
    components: {
      baseItem,
      ElForm, ElRow, ElCol, ElCard
    },
    props: {
      ...formProps
    },
    setup (props, context) {
      // console.log('表单控件的props：', props)

      // 获取 $ref
      const formControl = ref(null)
      onMounted(() => {
        // console.log('表单dom', formControl)
      })
      const {
        formMeta,
        itemMeta,
        model,
        partModel
      } = props

      // 调用表单的控制类
      const {
        formColSpan, // 确定组件占位
        showCol, // 是否显示字段的对象
        setFormColShow, // 设置组件联动
      } = formController(formMeta, itemMeta, model, partModel)

      // 获取分栏信息
      const { subMeta } = formMeta

      if (subMeta.type === 'card1'){}

      const cardOrder = subMeta.cols ?? []

      // 设置card 的列数

      const cardSpan = computed(() => 24 / (subMeta.cardColCount ?? 1) )
      
      return {
        ...formMeta,
        itemMeta,
        cardOrder,
        cardSpan, // 
        showCol, // 是否显示字段的对象
        formColSpan, // 确定组件占位
        // 函数
        setFormColShow, // 设置组件联动
        //
        formControl // 获取表单dom
      }
    }
  })
</script>